<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>表单</title>
    </head>
    <body>
        <!-- 
            表单标签
            form
                action 指明信息提交到的服务器地址
                method 指明信息提交的方式
                    get 提交从数据会写到url的后面，以 ? 开头，多个数据之间使用 & 隔开 因为地址栏长度有限 所以不能提交较大的数据
                    post 数据会通过请求体提交 可以提交文件等数据量大的数据 请求体中的数据既可以是字节型也可以是字符型

            表单项标签
                如果想将表单项中的数据进行提交 就必须指明表单项的 name 属性 它对应键值对的键
                                               还需要指明表单项的 value 属性 它对应键值对的值
            input 输入信息
                type 输入信息的表单项类型
                    text 单行普通文本 
                        disable 禁止
                        readonly 只读
                    password 单行密码
                    submit 提交按钮
                    reset 重置按钮
                    radio 单选框
                    checkbox 多选框
                    hidden 隐藏域
                    file 提交文件
            textarea 文本域 可以看作可以多行输入的文本框
            select 下拉选择框
                option 定义下拉框的选项
        -->
        <form action="../20241115/超链接.html" method="get">
            <!-- 如果text 和 password 指明了 value 值 那么指明的值就是默认值 用户也可以删掉自己填写-->
            <!-- 用户名 <input type="text" name="user" value="123456" id="user" /> <br /> -->
            <label>用户名<input type="text" name="user" value="123456" id="user"></label>
            密码 <input type="password" name="pwd" value="******" /> <br />
            <!-- 如果想要更改按钮上的文字 就更改按钮的 value 值 -->
            <input type="submit" value="提交数据" />
            <input type="reset" value="重置数据" /> <br />
            <!-- 单选框需要我们同时指定 name 和 value 的值 相同 name 的单选框具有互斥效果 -->
            <!-- 可以通过 checked 来指定默认选项 如果有多个单选框设置了checked 那么最后一个设置为 checked 会被指定为默认值 -->
            性别 <input type="radio" name="gender" value="1" checked/> 男 <input type="radio" name="gender" value="0"/> 女 <br />
            <!-- 多选框同样也需要同时设置 name 和 value 的值 也可以通过 checked 选项来指定默认值 -->
            爱好 <input type="checkbox" name="hobby" value="0" checked /> 唱 
                 <input type="checkbox" name="hobby" value="1" checked /> 跳 
                 <input type="checkbox" name="hobby" value="2" checked /> rap 
                 <input type="checkbox" name="hobby" value="3" checked /> 篮球🏀
                 <input type="checkbox" name="hobby" value="4" /> 当小黑子
            <!-- 隐藏域中的数据不会显示出来 但是会一起提交 -->
            <input type="hidden" name="uid" value="114514"> <br />
            <!-- 
                readonly 可以修饰 text 为只读属性 数据会提交
                disable 可以修饰 text 为禁用属性 数据不会提交
            -->
            <input type="text" name="pid" value="114" readonly> <br />
            <input type="text" name="tid" value="514" disabled> <br />
            <!-- 文本域双标签中间的内容 就是文本域的 value 可以设置默认值 -->
            个人简介 <textarea name="profile" id="profile" rows="10" cols="30">文本框默认内容</textarea> <br />
            籍贯 <select name="nation" id="nation">
                <option value="0">京✌</option>
                <option value="1">沪✌</option>
                <option value="2">广✌</option>
                <option value="3">港✌</option>
                <!-- 可以使用 selected 属性来指名下拉框的默认值 -->
                <option value="4" selected>请选择</option>
            </select> <br />
            身份证 <input type="file" name="id_card"> <br />
        </form>
    </body>
</html>
